<template>
	<uni-card is-full>
		<view class="mycss-flex-start">
			<text class="title-c">标题:</text>
			<uni-easyinput type="text" v-model="title" placeholder="请输入标题" clearable></uni-easyinput>
		</view>
		<view class="mycss-flex-start myborder">
			<text class="title-c">类别:</text>
			<u-radio-group v-model="radioType" shape="square">
				<u-radio :customStyle="{ margin: '5px' }" v-for="(item, index) in radioList" :key="index"
					:label="item.name" :name="item.id">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="mycss-flex-start myborder">
			<text class="title-c">内容:</text>
			<SpEditor ref="myspedit" :toolbar-config="toolbar" @init="initEditor" @input="inputOver" :readOnly="false">
			</SpEditor>
		</view>
		<view class="mycss-flex-start myborder">
			<u-button type="primary" size="mini" @click="edit()">修改提交</u-button>
		</view>
	</uni-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		inject
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	const editData = reactive({
		title: "",
		content: "",
		type: "",
		id: ""
	})
	const props = defineProps({
		title: {
			type: String,
			default: ""
		},
		content: {
			type: String,
			default: ""
		},
		type: {
			type: Number,
			default: 0
		},
		isWatch: {
			type: Boolean,
			default: false
		},

		id: {
			type: Number,
			default: 0
		},
	});
	import SpEditor from "@/uni_modules/sp-editor/components/sp-editor/sp-editor.vue";
	const addReports = inject('addReports');
	watch(props, (newValue, oldValue) => {
		console.log('1', props.title);
		console.log('2', props.type);
		console.log('3', props.content);
		console.log('4', props.id);
		a()
	})

	onMounted(() => {
		console.log("props", props)
		radioType.value = ("a" + props.type);
		title.value = props.title;
		id.value = props.id;
		console.log(myspedit.value);
		if (props.isWatch == false) {
			toolbar.excludeKeys.push("lineHeight")
			toolbar.excludeKeys.push("letterSpacing")
			toolbar.excludeKeys.push("listCheck")
		}
	})

	function edit() {
		// preRender()
		editData.title = title.value
		editData.content = content.value
		editData.type = radioType.value
		editData.id = id.value
		addReports(editData)
		console.log('编辑', content.value);
	}

	function a() {
		console.log("props", props)
		// myspedit.value = props.content;
		radioType.value = props.type;
		id.value = props.id;
		title.value = props.title;
		content.value = props.content;
		// content.value = props._rawValue.html;
		console.log(myspedit.value);
		if (props.isWatch == false) {
			toolbar.excludeKeys.push("lineHeight")
			toolbar.excludeKeys.push("letterSpacing")
			toolbar.excludeKeys.push("listCheck")
		}
		preRender()
	}
	const toolbar = reactive({
		excludeKeys: []
	});
	const myspedit = ref()
	const title = ref("");
	const content = ref("");
	const id = ref("");
	const radioType = ref("a0")
	const radioList = reactive([{
		id: "a0",
		name: "日"
	}, {
		id: "a1",
		name: "周"
	}, {
		id: "a2",
		name: "月"
	}, {
		id: "a3",
		name: "季"
	}, {
		id: "a4",
		name: "年"
	}]);

	function inputOver(e) {
		// 可以在此处获取到编辑器已编辑的内容
		content.value = e
		console.log('==== inputOver :', e)
		console.log('==== content.value :', content.value)
	}
	/**
	 * 编辑器就绪
	 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
	 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
	 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
	 */
	function initEditor(editor) {
		myspedit.editorIns = editor // 保存编辑器实例
		// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
		preRender()
	}

	function preRender() {
		myspedit.editorIns.setContents({
			html: content.value
		})
	}
</script>

<style scoped>
	.title-c {
		padding: 10rpx;
		font-size: 30rpx;
		border: 1px solid #e8e8e8;
		white-space: nowrap;
	}

	.myborder {
		border: 1px solid #e8e8e8;
	}
</style>